<template>
  <el-dialog
    class="view-record-comp"
    title="查看记录"
    :close-on-click-modal="false"
    :destroy-on-close="true"
    append-to-body
    :visible="visible"
    :width="$setRem(1200)"
    :before-close="handleCancel">
    <div class="table-container">
      <div class="search-container">
        <el-row type="flex" justify="space-between" align="middle">
          <el-col :span="1.5">材料名称：</el-col>
          <el-col :span="6" class="col-value">{{ materialData.materialName || '' }}</el-col>
          <el-col :span="2">规格/型号：</el-col>
          <el-col :span="3" class="col-value">{{ materialData.specs || '' }}</el-col>
          <el-col :span="1">单位：</el-col>
          <el-col :span="2" class="col-value">{{ materialData.unit || '' }}</el-col>
<!--          <el-col :span="6" class="input-content">-->
<!--            <el-input v-model="condition" placeholder="请按照材料名称" suffix-icon="el-icon-search"></el-input>-->
<!--          </el-col>-->
<!--          <el-col :span="2">-->
<!--            <el-button type="primary" @click="handleImport">导出</el-button>-->
<!--          </el-col>-->
        </el-row>
      </div>
      <el-table
        class="table-container"
        :data="tableData"
        v-loading="tableLoading"
        element-loading-custom-class="custom-load"
        row-key="id">
<!--        <el-table-column label="" width="50" align="center">-->
<!--          <template slot-scope="scope">-->
<!--            <el-radio size="medium" :value="scope.row.hasCheck" :label="true" @change="handleChange(scope.row)">-->
<!--              <span style="display: none;">{{ scope.row.hasCheck }}</span>-->
<!--            </el-radio>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column label="序号" type="index" width="70" align="center"></el-table-column>
        <el-table-column label="材料名称" sortable prop="materialName" align="center"></el-table-column>
        <el-table-column label="规格/型号" width="120" sortable prop="specs" align="center"></el-table-column>
        <el-table-column label="本次到场数量" sortable prop="currentNum" align="center"></el-table-column>
        <el-table-column label="单位" prop="unit" align="center"></el-table-column>
<!--        <el-table-column label="状态" align="center">-->
<!--          <template slot-scope="scope">-->
<!--            {{ statusOptions[scope.row.reviewFlag] || '' }}-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column label="反馈人" prop="createUserName" align="center"></el-table-column>
        <el-table-column label="审核人" prop="reviewUserName" align="center"></el-table-column>
        <el-table-column label="记录时间" sortable prop="modifyTime" align="center"></el-table-column>
        <el-table-column label="附件" show-overflow-tooltip sortable prop="modifyTime" align="center" width="140">
          <template slot-scope="scope">
            <div class="file-text">
              <el-image
                v-if="/\.jpg|\.jpeg|\.png$/.test(scope.row.fileUrl)"
                class="img"
                :src="$checkUrl(scope.row.fileUrl)"
                :preview-src-list="[$checkUrl(scope.row.fileUrl)]">
              </el-image>
              <span
                v-else
                class="file-name"
                :title="files(scope.row.fileUrl).name"
                @click="handleUpload(scope.row.fileUrl)">
                {{ files(scope.row.fileUrl).name }}
              </span>
            </div>
          </template>
        </el-table-column>
        <div class="empty-content" slot="empty">
          <i class="iconfont iconwushuju"></i>
          <p>暂无数据</p>
        </div>
      </el-table>
      <el-pagination
        v-if="total > 10"
        :page-size="pageSize"
        :current-page="pageNo"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      default: ''
    },
    // 材料信息
    materialData: {
      type: Object,
      default: () => ({})
    },
    // 计划信息
    planData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      tableData: [],
      tableLoading: false,
      total: 0,
      pageSize: 10,
      pageNo: 1,
      condition: '',
      planName: '',
      planNo: '',
      hasSearch: false,
      statusOptions: {
        '1': '暂存',
        '2': '审核中',
        '3': '回退',
        '4': '审核完成'
      },
    };
  },
  watch: {
    visible(val) {
      if (val) {
        this.getTableData();
        return;
      }
      this.clear();
      this.condition = '';
      this.planName = '';
      this.planNo = '';
      this.hasSearch = false;
    }
  },
  computed: {
    hasMaterial() {
      return this.materialData && Object.keys(this.materialData).length;
    },
    // 材料id
    materialId() {
      return this.materialData && this.materialData.id || '';
    }
  },
  methods: {
    /**
     * 获取列表数据
     */
    async getTableData() {
      this.tableLoading = true;
      const params = {
        pageNum: this.pageNo,
        pageSize: this.pageSize,
        materialId: this.materialId,
      };
      if (this.hasSearch) {
        params.condition = this.condition;
      }
      const { success, data: { data }} = await this.$Model.materialFeedbackList(params);
      this.tableLoading = false;
      if (success && data) {
        const list = data.list || [];
        this.tableData = list.map(item => {
          return {
            ...item,
            hasCheck: false
          };
        });
        this.total = data.total || 0;
      }
    },
    // 清除参数
    clear() {
      this.pageNo = 1;
      this.pageSize = 10;
      this.total = 0;
      this.tableLoading = false;
      this.tableData = [];
    },
    /**
     * pageSize 改变时会触发
     * @param pageSize 每页条数
     */
    handleSizeChange(pageSize) {
      this.pageNo = 1;
      this.pageSize = pageSize;
      this.getTableData();
    },
    /**
     * currentPage 改变时会触发
     * @param pageNo 当前页
     */
    handleCurrentChange(pageNo) {
      this.pageNo = pageNo;
      this.getTableData();
    },
    // 附件
    files(fileUrl) {
      const fileNames = fileUrl ? fileUrl.match(/([^\/])+\.\w+$/) : '';
      const fileName = Array.isArray(fileNames) ? fileNames[0] : '';
      return {
        name: fileName,
        url: this.$checkUrl(fileUrl),
        hasImg: /\.jpg|\.jpeg|\.png$/.test(fileUrl)
      };
    },
    handleUpload(fileUrl) {
      fileUrl && window.open(this.$checkUrl(fileUrl));
    },
    // 导出
    handleImport() {

    },
    // 取消
    handleCancel() {
      this.$emit('cancel');
    },
  }
};
</script>

<style scoped lang="scss">
  @import "../../../assets/styles/dialog";

  .view-record-comp {
    .table-container {
      .search-container {
        margin: 15px 0;
        .col-value {
          color: $mainColor;
        }
        .input-content {
          padding-right: 30px;
        }
      }
      /deep/ .el-table {
        height: 500px;
        .el-table__body-wrapper {
          height: calc(100% - 40px);
          overflow-y: auto;
          .file-name {
            width: 100%;
            display: inline-block;
            color: $mainColor;
            text-decoration: underline;
            cursor: pointer;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .img {
            width: 100px;
            height: 65px;
          }
        }
      }
    }
  }
</style>
